@<template>
  <div class="Scheme">
    <h1 class="peise1">主题色配置</h1>
    <h2 class="peise2">预设选择</h2>
    <div class="Default1">
      <div class="c1"></div>
      <div class="c2"></div>
      <div class="c3"></div>
      <P>黑暗森林</P>
    </div>
    <div class="Default2">
      <div class="c4"></div>
      <div class="c5"></div>
      <div class="c6"></div>
      <P>童话粉</P>
    </div>
    <h2 class="peise3">颜色设置</h2>
    <div class="leftColor">
      <el-color-picker v-model="color1" @change="changecolor"></el-color-picker>
      <p>左边框背景色</p>
    </div>
    <div class="rightColor">
      <el-color-picker
        v-model="color2"
        @change="changecolor2"
      ></el-color-picker>
      <p>右边框背景色</p>
    </div>
    <div class="backgroundColor">
      <el-color-picker
        v-model="color3"
        @change="changecolor3"
      ></el-color-picker>
      <p>背景色</p>
    </div>
    <div class="TextColor">
      <el-color-picker
        v-model="color4"
        @change="changecolor4"
      ></el-color-picker>
      <p>文字颜色</p>
    </div>
    <div class="Resetkey">
<el-row>
  <el-button type="danger" round @click="flushed">重置按钮</el-button>
</el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "SystemSettings",
  data() {
    return {
      color1: "rgb(255, 255, 255)",
      color2: "rgb(355, 255, 155)",
      color3: "rgb(239, 239, 244)",
      color4: "rgb(255, 180, 190)",
    };
  },
  methods: {
    changecolor() {
      console.log(this.color1);
      this.$store.commit("change", this.color1);
    },
    changecolor2() {
      console.log(this.color2);
      this.$store.commit("change2", this.color2);
    },
    changecolor3() {
      console.log(this.color3);
      this.$store.commit("change3", this.color3);
    },
    changecolor4() {
      console.log(this.color4);
      this.$store.commit("change4", this.color4);
    },
    flushed(){
    this.$router.go(0)
   
    }
  }
};
</script>

<style lang='less'>
.peise1 {
  margin-left: 50px;
  // color: #fff;
  color: var(--TextColor);
  font-size: 20px;
  padding-top: 33px;
}
.peise2 {
  margin-left: 50px;
  font-size: 18px;
  // color: rgb(227, 221, 221);
  color: var(--TextColor);
  margin-top: 50px;
}
.Default1 {
  /* border: 1px solid red; */
  width: 100px;
  margin-left: 16px;
  cursor: pointer;
}
.c1,
.c2,
.c3 {
  width: 40px;
  height: 40px;
  /* border: 1px solid red; */
  border-radius: 50px;
  margin-left: 50px;
  margin-top: 33px;
}
.c1 {
  background-color: #1e1d2b;
}
.c2 {
  margin-top: -20px;
  margin-left: 37px;
  background-color: rgb(72, 73, 94);
}
.c3 {
  margin-top: -39px;
  margin-left: 65px;
  background-color: #222433;
}
.Default1 p {
  margin-left: 37px;
  /* border: 1px solid red; */
  width: 70px;
  // color:rgb(227, 221, 221) ;
  color: var(--TextColor);
}
.Default2 {
  /* border: 1px solid red; */
  width: 100px;
  margin-left: 150px;
  margin-top: -130px;
  cursor: pointer;
}
.c4,
.c5,
.c6 {
  width: 40px;
  height: 40px;
  /* border: 1px solid red; */
  border-radius: 50px;
  margin-left: 50px;
  margin-top: 33px;
}
.c4 {
  background-color: rgb(239, 239, 244);
}
.c5 {
  margin-top: -20px;
  margin-left: 37px;
  background-color: rgb(255, 255, 255);
}
.c6 {
  margin-top: -39px;
  margin-left: 65px;
  background-color: rgb(255, 180, 190);
}
.Default2 p {
  margin-left: 45px;
  /* border: 1px solid red; */
  width: 70px;
  // color:rgb(227, 221, 221) ;
  color: var(--TextColor);
}
.peise3 {
  margin-left: 50px;
  font-size: 18px;
  // color: rgb(227, 221, 221);
  color: var(--TextColor);
  margin-top: 50px;
}
.leftColor {
  margin-left: 60px;
  margin-top: 30px;
}
.leftColor p {
  width: 80px;
  text-align: center;
  font-size: 15px;
  margin-left: -20px;
  color: var(--TextColor);
}
.rightColor {
  margin-left: 170px;
  margin-top: -113px;
}
.rightColor p {
  width: 80px;
  text-align: center;
  font-size: 15px;
  margin-left: -20px;
  color: var(--TextColor);
}
.backgroundColor {
  margin-left: 280px;
  margin-top: -113px;
}
.backgroundColor p {
  width: 80px;
  text-align: center;
  font-size: 15px;
  margin-left: -20px;
  color: var(--TextColor);
}
.TextColor {
  margin-left: 390px;
  margin-top: -92px;
}
.TextColor p {
  width: 80px;
  text-align: center;
  font-size: 15px;
  margin-left: -20px;
  color: var(--TextColor);
}
.Resetkey{
  // border: 1px solid red;
  width: 100px;
  margin-left: 40px;
  margin-top: 60px;
  cursor: pointer;
}
</style>